<script lang="ts">

import {isMobile} from "@/components/isMobile";

export default {
  data() {
    return {
      url : [  '/src/components/img/bg1.png','/src/components/img/shunjian.png'],
      url1 : '/src/components/img/bg1.png',
    };
  },
  computed:
      {
        isMobile() {
          return isMobile();
        },
      }
}
</script>


<template>
<!--  电脑端页面-->
<view v-if="!isMobile">
  <div class="demo-image__preview">
    <el-image
        style="width: auto; height: auto"
        :src="url1"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :initial-index="4"
        :preview-src-list="url"
        fit="contain"
    />
  </div>
</view>

  <view v-else>
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in url" :key="image">
        <img :src="image"  alt=""/>
      </van-swipe-item>
    </van-swipe>
  </view>
</template>

<style scoped>
:deep(.demo-image__error .image-slot) {
  font-size: 30px;
}
:deep(.demo-image__error .image-slot .el-icon) {
  font-size: 30px;
}
:deep(.demo-image__error .el-image) {
  width: 100%;
  height: 200px;
}
:deep(.van-swipe) {
  width: 100%; /* 确保轮播组件与屏幕宽度相匹配 */
  overflow: hidden; /* 隐藏超出轮播组件的图片部分 */
}

:deep(.van-swipe-item img) {
  width: 100%; /* 图片宽度设置为100% */
  height: auto; /* 高度自动，以保持纵横比 */
  display: block; /* 消除图片下方的空白 */
}
</style>